$('#cateToggleLink').click(function () {
  var cateListBox = $('#cateListBox')
  if (!cateListBox.hasClass('n-sltlyr-show')) {
    cateListBox.addClass('n-sltlyr-show')
  } else {
    cateListBox.removeClass('n-sltlyr-show')
  }
})
// 封装Ajax
function ajax(obj, callback) {
  var xhr = new XMLHttpRequest()
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      if (typeof xhr.responseText === 'string') {
        var data = JSON.parse(xhr.responseText)
      } else {
        var data = xhr.responseText
      }
      callback(data)
    }
  }
  xhr.open(obj.method, 'https://qqmuise.vercel.app' + obj.url)
  if (obj.contentType) {
    xhr.setRequestHeader('content-type', obj.contentType)
  }
  xhr.send(JSON.stringify(obj.params))
}
// 选择分类
function catlist(data) {
  var data_sub = data.sub
  for (let k in data.categories) {
    $('dt')[k].innerHTML += data.categories[k]
  }
  for (let i = 0, len = data_sub.length; i < len; i++) {
    $('dd')[
      data_sub[i].category
    ].innerHTML += `<a class="s-fc1" href="javascript:;" data-cat="${data_sub[i].name}">${data_sub[i].name}</a><span class="line">|</span>`
  }
}

ajax(
  {
    method: 'get',
    url: '/playlist/catlist',
  },
  catlist
)
// 开始自动加载'全部'分类歌单
ajax(
  {
    method: 'get',
    url: '/top/playlist?limit=35&cat=全部',
  },
  playlists
)
// 点击分类渲染对应歌单
var totalPages //总页数
function playlists(data) {
  totalPages = Math.ceil(data.total / 35)
  $('#m-pl-container')[0].innerHTML = ''
  var dp = data.playlists
  for (let i = 0, len = dp.length; i < len; i++) {
    var li = document.createElement('li')
    var dpObj = dp[i]
    if (dpObj.creator.avatarDetail) {
      var small_img = dpObj.creator.avatarDetail.identityIconUrl
    } else {
      var small_img = ''
    }
    li.innerHTML = `<div class="u-cover u-cover-1">
      <img
        class="j-flag"
        src="${dpObj.coverImgUrl}"
      />
      <a
        title="${dpObj.name}"
        href="javascript:;"
        class="msk"
      ></a>
      <div class="bottom">
        <a
          class="icon-play f-fr"
          title="播放"
          href="javascript:;"
          data-res-type="13"
          data-res-id="7451656722"
          data-res-action="play"
        ></a>
        <span class="icon-headset"></span>
        <span class="nb">14万</span>
      </div>
    </div>
    <p class="dec">
      <a
        title="${dpObj.name}"
        href="/playlist?id=7451656722"
        class="tit f-thide s-fc0"
        >${dpObj.name}</a
      >
    </p>
    <p>
      <span class="s-fc4">by</span>
      <a
        title="${dpObj.creator.nickname}"
        href=javascipt:;"
        class="nm nm-icn f-thide s-fc3"
        >${dpObj.creator.nickname}</a
      >
      <img
        style="
          height: 13px;
          width: 13px;
          display: inline-block;
          vertical-align: middle;
        "
        src="${small_img}"
      />
    </p>`
    $('#m-pl-container')[0].appendChild(li)
  }
  $('#cateListBox').removeClass('n-sltlyr-show')
  $('.f-ff2.d-flag')[0].innerHTML = catName
  $('.zpgi')[8].innerHTML = `${totalPages}`
}
var catName = '全部'
$('.bd').click(function (e) {
  if (e.target.localName === 'a' || e.target.localName === 'em') {
    catName = e.target.getAttribute('data-cat')
    ajax(
      {
        method: 'get',
        url: '/top/playlist?offset=0&limit=35&cat=' + catName,
      },
      playlists
    )
    $('.zpgi.js-selected').removeClass('js-selected')
    $('.zpgi')[0].setAttribute('class', 'zpgi js-selected')
    $('.zprv').addClass('js-disabled')
  }
})
// 换页
$('.u-page').click(function (e) {
  if (e.target.classList[0] === 'zpgi') {
    var eti = e.target.innerHTML
    if (!$(e.target).hasClass('js-selected')) {
      ajax(
        {
          method: 'get',
          url: `/top/playlist??order=hot&cat=${catName}&limit=35&offset=${
            (eti - 1) * 35
          }`,
        },
        playlists
      )
    }

    threeDot(e.target)
    if (eti != 1 && eti != totalPages) {
      $('.zprv').removeClass('js-disabled')
      $('.znxt').removeClass('js-disabled')
    } else if (eti == totalPages) {
      $('.znxt').addClass('js-disabled')
      if ($('.zprv').hasClass('js-disabled')) {
        $('.zprv').removeClass('js-disabled')
      }
    } else if (eti == 1) {
      $('.zprv').addClass('js-disabled')
      if ($('.znxt').hasClass('js-disabled')) {
        $('.znxt').removeClass('js-disabled')
      }
    }
  }
})
// 判断是否需要添加'...'
var flg = true
var sign = false
function threeDot(data) {
  var val = data.innerHTML
  var con = [3, 2, 1, 0, -1, -2, -3]
  if (val > 5 && val <= totalPages - 5) {
    sign = true
    if (flg) {
      flg = false
      $('.zdot').remove()
      $('#zpgi_first').after('<span class="zdot">...</span>')
      $('#zpgi_last').before('<span class="zdot">...</span>')
    }
    for (let i = 1; i < 8; i++) {
      $('.zpgi')[i].innerHTML = val - con[i - 1]
    }
    $('.zpgi.js-selected').removeClass('js-selected')
    $('.zpgi')[4].setAttribute('class', 'zpgi js-selected')
  } else if (val <= 5) {
    flg = true
    var zpgi_first = $('#zpgi_first').next()
    $('.zpgi.js-selected').removeClass('js-selected')
    $(data).addClass('js-selected')
    if (zpgi_first[0].nodeName === 'SPAN') {
      zpgi_first.remove()
    }
    for (let i = 1; i < 8; i++) {
      $('.zpgi')[i].innerHTML = 1 + i
    }
  } else if (val > totalPages - 5) {
    flg = true
    sign = true
    var zpgi_last = $('#zpgi_last').prev()
    if (zpgi_last[0].nodeName === 'SPAN') {
      zpgi_last.remove()
    }
    var n = 7
    var res = 8 - (totalPages - data.innerHTML)
    for (let i = 1; i < 8; i++) {
      $('.zpgi')[i].innerHTML = totalPages - n--
    }
    $('.zpgi.js-selected').removeClass('js-selected')
    if (sign) {
      sign = false
      $(`.zpgi`)[res].setAttribute('class', 'zpgi js-selected')
    } else {
      $(data).addClass('js-selected')
    }
  }
  if (val === totalPages - 1) {
    $('.znxt').addClass('js-disabled')
  }
  if (val === 2) {
    $('.zprv').addClass('js-disabled')
  }
}
// 上一页/下一页
$('.zprv').click(function () {
  var theHTML = $('.js-selected')[0].innerHTML
  if (theHTML == 2) {
    $('.js-selected').prev().click()
    $('.zprv').addClass('js-disabled')
    return
  } else {
    $('.znxt').removeClass('js-disabled')
    if (theHTML != 1) {
      $('.js-selected').prev().click()
    }
  }
})
$('.znxt').click(function () {
  var theHTML = $('.js-selected')[0].innerHTML
  if (theHTML == totalPages - 1) {
    $('.js-selected').next().click()
    $('.znxt').addClass('js-disabled')
    return
  } else {
    $('.zprv').removeClass('js-disabled')
    if (theHTML != totalPages) {
      $('.js-selected').next().click()
    }
  }
})
